<template>
  <el-card class="aui-card--fill" shadow="never">
    <el-descriptions :column="4" border direction="vertical" title="用户信息">
      <el-descriptions-item :span="2" label="用户名">{{ user.username }}</el-descriptions-item>
      <el-descriptions-item :span="2" label="邮箱">{{ user.email }}</el-descriptions-item>
      <el-descriptions-item label="选择配送地址">
        <el-button class="el-icon-position" @click="drawer = true">
        </el-button>
      </el-descriptions-item>
      <el-descriptions-item label="姓名">{{ address.name }}</el-descriptions-item>
      <el-descriptions-item label="电话">{{ address.phone }}</el-descriptions-item>
      <el-descriptions-item label="地址">{{ address.address }}</el-descriptions-item>
    </el-descriptions>
    <el-table
        ref="multipleTable"
        :data="goodList"
        class="table"
        height="500"
        style="width: 100%"
        tooltip-effect="dark"
    >
      <el-table-column label="商品图片" width="150">
        <template slot-scope="scope">
          <el-image :src=" (scope.row.picUrl)" style="width: 100px; height: 100px"
          >
          </el-image>
        </template>
      </el-table-column>
      <el-table-column
          label="商品名称"
          prop="goodName"
          width="200">
      </el-table-column>
      <el-table-column
          label="单价"
          show-overflow-tooltip
          width="200"
      >16
      </el-table-column>
      <el-table-column
          label="数量"
          show-overflow-tooltip
          width="300"
      >
        <template slot-scope="scope">
          <div class="num">
            {{ scope.row.goodNum }}
          </div>
        </template>
      </el-table-column>
      <el-table-column
          align="right">
        <template slot="header" slot-scope="scope">
          <div> 总价 ：{{ totalPrice }}</div>
          <el-button type="success" @click="clear()">去结算</el-button>
        </template>
      </el-table-column>

    </el-table>
    <el-drawer
        :visible.sync="drawer"
        size="50%"
        title="收货地址">
      <el-table :data="addressList">
        <el-table-column label="姓名" prop="contactName" width="200"></el-table-column>
        <el-table-column label="电话" prop="contactTel"></el-table-column>
        <el-table-column label="地址" prop="address"></el-table-column>
        <el-table-column
            align="right">
          <template slot="header" slot-scope="scope">
            <el-button type="success" @click="address1()">添加地址</el-button>
          </template>
          <template slot-scope="scope">
            <i class="el-icon-success" style="width: 50px" @click="conAddress(scope.row)"></i>
            <i class="el-icon-edit" style="width: 50px" @click="update(scope.row)"></i>
            <i class="el-icon-delete" style="width: 50px" @click="del(scope.row)"></i>
          </template>
        </el-table-column>
      </el-table>
    </el-drawer>
    <!--    添加、修改地址-->
    <el-drawer
        :title=title
        :visible.sync="sss">
      <el-form ref="ruleForm" :model="newAddress" :rules="rules" label-width="80px">
        <el-form-item label="姓名">
          <el-input v-model="newAddress.name" prop="name"></el-input>
        </el-form-item>
        <el-form-item label="地址">
          <el-input v-model="newAddress.address" prop="address"></el-input>
        </el-form-item>
        <el-form-item label="电话">
          <el-input v-model="newAddress.phone" prop="phone"></el-input>
        </el-form-item>
        <el-button style="margin-left: 100px" type="warning" @click="conUpdate('ruleForm')">确认</el-button>
        <el-button style="margin-left: 150px" type="primary" @click="ss()">取消</el-button>
      </el-form>
    </el-drawer>
  </el-card>
</template>
<script>
export default {
  created() {
    this.getUser()
    this.getGoodsList();
  },
  data() {
    return {
      user: {},
      userId: '',
      addressList: [],
      address: {
        name: '',
        phone: '',
        address: ''
      },
      totalPrice: 0,
      orderId: 0,
      drawer: false,
      sss: false,
      newAddress: {
        userId: '',
        daId: '',
        name: '',
        phone: '',
        address: ''
      },
      title: '',
      ruleForm: {
        name: '',
        phone: '',
        address: '',
      },
      goodList: [],
      rules: {
        name: [
          {required: true, message: '请输入联系人姓名', trigger: 'blur'},
          {min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur'}
        ],
        address: [
          {required: true, message: '请输入地址', trigger: 'blur'},
          {min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur'}
        ],
        phone: [
          {required: true, message: '请输入联系人电话', trigger: 'blur'},
          {min: 3, max: 13, message: '长度在 3 到 13 个字符', trigger: 'blur'}
        ]
      }
    }
  },
  methods: {
    getUser() {
      this.$http.get("/sys/user/getById", {}).then(({data: res}) => {
        this.user = res.data
        this.userId = res.data.id
        this.getAddressList(res.data.id)
      }).catch(() => {
      })

    },
    getAddressList(id) {
      this.$http.get("deliveryAddress/deliveryaddress/getById", {params: {id: id}}).then(({data: res}) => {
        this.addressList = res.data
      }).catch(() => {
      })
    },
    address1() {
      this.sss = true
      this.title = "添加地址"
    },
    update(item) {
      let daId = item.daId
      let userId = item.userId
      this.newAddress.userId = userId
      this.newAddress.daId = daId
      this.sss = true
      this.title = "修改地址"
    },
    del(item) {
      let daId = item.daId
      let userId = item.userId
      this.$http.delete("deliveryAddress/deliveryaddress/delete", {params: {id: daId}}).then(({data: res}) => {
        this.getAddressList(userId)
      }).catch(() => {
      })
    },
    conAddress(item) {
      this.address.address = item.address
      this.address.name = item.contactName
      this.address.phone = item.contactTel
    },
    conUpdate(formName) {
      if (this.title == "修改地址") {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.$http.put("deliveryAddress/deliveryaddress/update", {
              userId: this.newAddress.userId,
              daId: this.newAddress.daId,
              contactName: this.newAddress.name,
              contactTel: this.newAddress.phone,
              address: this.newAddress.address
            }).then(({data: res}) => {
              if (res == 1) {
                this.$message('修改成功');
                this.newAddress.address = ''
                this.newAddress.name = ''
                this.newAddress.phone = ''
                this.getAddressList(this.newAddress.userId)
              }

            }).catch(() => {
            })
          } else {
            console.log('error submit!!');
            return false;
          }
        })
      } else {
        this.$http.post("deliveryAddress/deliveryaddress/create", {
          userId: this.userId,
          daId: 0,
          contactName: this.newAddress.name,
          contactTel: this.newAddress.phone,
          address: this.newAddress.address
        }).then(({data: res}) => {
          if (res == 1) {
            this.$message('添加成功');
            this.newAddress.address = ''
            this.newAddress.name = ''
            this.newAddress.phone = ''
            this.getAddressList(this.user.userId)
          }

        }).catch(() => {
        })
      }


    },
    ss() {
      this.sss = false
      this.newAddress.address = ''
      this.newAddress.name = ''
      this.newAddress.phone = ''
    },
    getGoodsList() {
      this.goodList = JSON.parse(localStorage.getItem('goodList'));
      this.totalPrice = localStorage.getItem("total");
      this.orderId = localStorage.getItem("orderId");
    }, clear() {
      let clear = {}
      clear.orderId = this.orderId
      clear.userId = this.userId
      console.log(clear)
      // 清空购物车 修改订单状态
      this.$http.put("cart/cart/clear",
          clear).then(({data: res}) => {
        if (res > 0) {
          localStorage.clear()
          this.$message({
            message: '购买成功，预计两天送达',
            type: 'success'
          });
        }
      }).catch(() => {
      })
    }
  },
}
</script>
